<template>
  <div id="main">
    <div v-if="comment.length == 0">暂无评论</div>
    <div v-else>
      <a-comment v-for="(item, index) in comment" :key="item.index" id="comment">
        <a slot="author" id="name">{{item.name}}</a>
        <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          alt="Han Solo"
        />
        <p slot="content" @click="changeCommenter(item.name,index)">
          {{item.content}}
        </p>
        <div v-if="item.reply.length > 0">
          <div v-for="reply in item.reply" class="reply" :key="reply.id">
            <b>{{reply.responder}}&nbsp;&nbsp;回复&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>
            <p @click="changeCommenter(reply.responder,index)">{{reply.content}}</p>
          </div>
        </div>
      </a-comment>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyContent",
  props: ['comment'],
  data () {
    return {
    };
  },
  methods: {
    changeCommenter: function(name,index) {
      this.$emit("change",name,index);
    }
  },
  mounted(){
    console.log("这里",this.comment)
  }
}
</script>
<style lang="less" scoped>
  #main {
    #comment {
      #name {
        font-size: 18px !important;
      }
      p {
        font-size: 12px;
      }
    }
  }
</style>